<template>
	<!-- 	<transition v-if="!$route.meta.NoNeedHome" name="fade" mode="out-in">
		<router-view />
	</transition> -->
	<transition name="fade" mode="out-in">
		<router-view />
	</transition>
	<Login_dialog ref="loginDialog" v-model:dialogVisible="$store.state.Login_dialog_flag" />
	<Free_phone_dialog v-model:Free_phone_dialogVisible="freePhoneDialogVisible" />
	<Try_out_dialog v-model:Try_out_dialogVisible="trialDialogVisible" />
</template>

<script setup>
	// 1. 导入依赖（确保路径正确，避免文件找不到导致的null错误）
	import Login_dialog from '@/components/Login_dialog.vue'
	import Free_phone_dialog from '@/components/Free_phone_dialog'
	import Try_out_dialog from '@/components/Try_out_dialog'
	import {
		computed,
		ref,
		provide
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	// 2. 顶层声明Store实例（避免重复调用，防止作用域问题）
	const store = useStore()
	// 3. 登录弹窗ref（显式声明类型，避免null引用错误）
	const loginDialog = ref(null)
	// 修改后的计算属性
	const freePhoneDialogVisible = computed({
		get() {
			// 原有条件
			const usedCoupon = store.state.Userdata?.usedCoupon ?? 1
			const isCouponZero = usedCoupon === 0
			const isTryDialogClosed = store.state.try_out_dialog_close === false
			const originalCondition = (isCouponZero && isTryDialogClosed)
			// 新增：强制显示条件（从 Vuex 获取）
			const forceShowCondition = store.state.forceShowFreePhoneDialog || false
			// 任一条件满足就显示弹窗
			return originalCondition || forceShowCondition
		},
		set(newVal) {
			if (!newVal) {
				// 关闭时重置所有相关状态
				store.commit('updateTryOutDialogClose', false)
				store.commit('setForceShowFreePhoneDialog', false)
			}
		}
	})
	const trialDialogVisible = computed({
		get() {
			return (store.state.isLogin && store.state.Userdata?.showTrialFinished) ?? false
		},
		set(newVal) {
			if (!newVal) {
				// 确保mutation存在，避免commit不存在的方法导致错误
				store.commit('updateUserdataShowTrialFinished', false)
			}
		}
	})

	// 5. 初始化登录状态（顶层执行，等价于created）
	store.commit('isLogin_fun')

	// 6. 提供登录弹窗方法（避免重复调用useStore）
	provide('openLogin_dialog', () => {
		store.commit('Login_dialog_show')
	})
</script>
<style>
	@import '@/style/iconfont.css';

	html,
	body,
	#app {
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		/* 禁止全局滚动条 */
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}

	span,
	img {
		display: inline-block;
	}

	p {
		margin: initial;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 100%;
		min-height: 400px;
	}

	.el-message {
		z-index: 9999 !important;
	}

	/* .el-popper{
		padding: 0px !important;
	} */
	/*每个页面公共css */
	.flex_between_center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex_center_center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fun_options {
		p {
			margin: 0;
			padding: 10px 0 10px 20px;
		}

		p:hover {
			background-color: rgb(235.9, 245.3, 255);
			color: #409eff;
			cursor: pointer;
		}
	}
</style>